<template>
	<view class="activity-goods-box x-bc" @tap="jump('/pages/activity/GroupDetails/index', { id: cid })">
		<view class="img-box">
			<slot name="tag"></slot>
			<image class="img" :src="img" mode="aspectFill"></image>
		</view>
		<view class="goods-right y-bc">
			<view class="title one-t">{{ title }}</view>
			<view class="tip one-t">{{ info }}</view>
			<view class="slod-end">
				<slot name="sell"></slot>
			</view>
			<view class=" price-box">
				<view class="x-f">
					<view class="current">￥{{ price }}</view>
					<view class="original">￥{{ productPrice }}</view>
				</view>
			</view>
			<slot name="btn"></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'activityCard',
		components: {},
		data() {
			return {};
		},
		props: {
			cid: 0,
			img: '',
			title: '',
			info: '',
			price: '',
			productPrice: ''
		},
		computed: {},
		created() {},
		methods: {
			// 路由跳转
			jump(path, parmas) {
				this.$yrouter.push({
					path: path,
					query: parmas
				});
			}
		}
	};
</script>

<style lang="scss">
	.activity-goods-box {
		padding: 40rpx 20rpx;
		background: #fff;

		.img-box {
			margin-right: 20rpx;
			width: 200rpx;
			height: 200rpx;
			overflow: hidden;
			position: relative;

			.img {
				width: 200rpx;
				height: 200rpx;
				background-color: #ccc;
			}
		}

		.goods-right {
			width: 450rpx;
			min-height: 200rpx;
			align-items: flex-start;
			position: relative;

			.title {
				font-size: 28rpx;
				line-height: 28rpx;
				width: 450rpx;
			}

			.tip {
				font-size: 22rpx;
				color: #a8700d;
				width: 500rpx;
			}

			.price-box {
				.current {
					font-size: 28rpx;
					font-weight: 500;
					color: rgba(225, 33, 43, 1);
				}

				.original {
					font-size: 22rpx;
					font-weight: 400;
					text-decoration: line-through;
					color: rgba(153, 153, 153, 1);
					margin-left: 14rpx;
				}
			}
		}
	}
</style>
